<script setup lang="ts">
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

const handleResolve = () => {
  console.log('resolve')
}
const handlePending = () => {
  console.log('handlePending')
}
const handleFallback = () => {
  console.log('handleFallback')
}
</script>

<template>
  <div>
    <h2>父组件</h2>

    <br />
    <hr />
    <br />

    <Suspense @resolve="handleResolve" @pending="handlePending" @fallback="handleFallback">
      <template #default>
        <div>
          <Child1></Child1>

          <br />
          <hr />
          <br />

          <Child2></Child2>
        </div>
      </template>

      <template #fallback> 加载中...</template>
    </Suspense>
  </div>
</template>

<style scoped></style>
